<template>
	<view class="my_app">
		<view class="info-box">
			<view class="user-info">
				<view class="user-img">
					<image v-if="LoginOrNot&&!toCompleteResume"
						:src="(basic && basic.photo_img_src)?basic.photo_img_src: imgUrl + 'empty_photo.png'">
					</image>
					<image v-else src="@/static/img/empty_photo_1.png">
					</image>
				</view>
				<view class="user-text">
					<view class="t1">
						<text class="text" v-if="LoginOrNot&&!toCompleteResume">
							{{ (basic && basic.fullname)?basic.fullname:'未注册' }}
							<text class="pos" v-if="basic.complete_percent">
								{{ (basic && basic.complete_percent)?basic.complete_percent:0 }}%
							</text>
						</text>
						<text class="text" v-else-if="LoginOrNot&&toCompleteResume"
							@click="handlerJump('/member/Login')">
							{{userMobile}}
						</text>
						<text class="text" v-else @click="handlerJump('/member/Login')">
							点击登录/注册
						</text>
					</view>
					<view class="t2" v-if="LoginOrNot&&!toCompleteResume">
						{{ basic ? basic.current_text : '' }}
					</view>
					<view class="t2" v-else-if="LoginOrNot&&toCompleteResume">
						请先完善简历
					</view>
					<view class="t2" v-else>
						登录体验更多服务
					</view>
				</view>
				<view v-if="LoginOrNot" class="user-resume" @click="handlerJump('/personal/EditResume')">
					编辑简历
				</view>
			</view>
			<view class="info-list">
				<view class="item" @click="handlerJump('/personal/JobManagementIndex?navStatus=1')">
					<view class="num">
						{{resumeTotal.job_apply.number}}
					</view>
					<view class="text">
						已申请
					</view>
				</view>

				<view class="item" @click="handlerJump('/personal/JobManagementIndex?navStatus=0')">
					<view class="num">
						{{resumeTotal.interview.number}}
					</view>
					<view class="text">
						面试邀请
					</view>
				</view>

				<view class="item" @click="handlerJump('/personal/JobManagementIndex?navStatus=2')">
					<view class="num">
						{{resumeTotal.attention_me.number}}
					</view>
					<view class="text">
						被关注
					</view>
				</view>

				<view class="item" @click="handlerJump('/personal/JobManagementIndex?navStatus=3')">
					<view class="num">
						{{resumeTotal.view_job.number}}
					</view>
					<view class="text">
						我的足迹
					</view>
				</view>

			</view>
		</view>
		<view class="box_2" v-if="basic && parseInt(basic.is_display) === 0">
			您的简历当前不公开，企业无法搜到到您的简历哦！
			<view class="right_txt" @click="handlerJumpQuery('/personal/PrivacySetting?privacyType=','resumeState')">
				去开启
			</view>
		</view>
		<view class="box_title">
			<view>
				求职管理
			</view>
			<view class="right_txt">
				完整度高的简历更容易获得企业青睐
			</view>
		</view>
		<view class="box_4">
			<view class="box_item" @click="handlerJump('/personal/EditResume')">
				<view class="ico_box b1"></view>
				<view>我的简历</view>
			</view>
			<view class="box_item" @click="refreshResume">
				<view class="ico_box b9"></view>
				<view>刷新简历</view>
			</view>
			<view class="box_item" @click="handlerJump('/personal/CollectionIndex?navStatus=0')">
				<view class="ico_box b6"></view>
				<view>我的收藏</view>
			</view>

			<view class="box_item" @click="handlerJump('/personal/CollectionIndex?navStatus=1')">
				<view class="ico_box b8"></view>
				<view>关注公司</view>
			</view>
			<view class="clear"></view>
		</view>
		<view class="form_split_18"></view>
		<view class="box_7">
			<view class="handle_line l2" @click="handlerJump('/personal/Recommend')">
				智能匹配
				<view class="tip_go"></view>
				<view class="right_txt">精准推荐职位、订阅最新职位</view>
			</view>
			<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
			<view class="handle_line l2" @click="handlerJump('/service/personal/addService')">
				会员服务
				<view class="right_txt">增值服务</view>
			</view>
			<!-- #endif -->
			<view class="handle_line l3"
				@click="handlerJumpQuery('/personal/PrivacySetting?privacyType=','resumeState')">
				公开状态
				<view class="right_txt">简历隐私开关、屏蔽企业设置</view>
			</view>
			<view class="handle_line l8"
				@click="handlerJumpQuery('/personal/PrivacySetting?privacyType=','shieldCompany')">
				屏蔽企业
				<view class="right_txt">已屏蔽 {{blackListNum}} 家企业</view>
			</view>
			<view class="handle_line l6" @click="showSwitchType = true">
				我要招聘
				<view class="right_txt">我是企业/个体户，我要招人才</view>
			</view>

			<view v-if="LoginOrNot" class="handle_line l7" @click="isExitTipsModal = true">
				退出登录
			</view>
		</view>
		<!--简历完整度过低，弹窗提示-->
		<u-popup v-model="showLowPop">
			<view class="box_8">
				<view class="tx1">好工作，从好简历开始</view>
				<view class="tx2">完善的简历有助于您的岗位匹配</view>
				<view class="tx2">是否前往完善？</view>
				<view class="btn_wrapper">
					<view class="btn_left" @click="showLowPop=false">取消</view>
					<view class="btn_right" @click="handlerJump('/member/personal/resume')">继续完善</view>
					<view class="clear"></view>
				</view>
			</view>
		</u-popup>
		<!--简历完整度过低，弹窗提示-->
		<u-popup v-model="showRefreshPop">
			<view class="box_9">
				<view class="tx1">刷新简历</view>
				<view class="tx2">不让简历石沉大海，每天从刷新简历开始</view>
				<view class="btn_wrapper">
					<view class="btn_right" @click="refreshResume">刷新简历</view>
				</view>
			</view>
		</u-popup>
		<BottomNav></BottomNav>
		<view v-if="showSwitchType" :class="showSwitchType ? 'login-popup login-popup-ac' : 'login-popup' ">
			<SwitchType @closeSwitchType="showSwitchType = false" :target_utype="1"></SwitchType>
		</view>

		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
		<!-- 退出账号 -->
		<u-modal v-model="isExitTipsModal" title="提示" content="确定退出吗？" show-cancel-button @confirm="handleOutLogin"
			@cancel="isExitTipsModal = false"></u-modal>
	</view>
</template>

<script>
	import SwitchType from '@/components/account/SwitchType'
	import handlerHttpError from '@/utils/error'
	import {
		dateCompare,
		getParam,
		toAddResumeByForm
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import Ad from '@/components/Ad'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'PersonalIndex',
		components: {
			SwitchType,
			Ad
		},
		data() {
			return {
				resumeTotal: {
					job_apply: {
						number: 0
					},
					interview: {
						number: 0
					},
					attention_me: {
						number: 0
					},
					view_job: {
						number: 0
					}
				},
				imgUrl: getApp().globalData.imgUlr,
				empty_resume: false,
				showLowPop: false, // 是否显示简历完整度过低弹窗
				showRefreshPop: false, // 是否显示刷新简历弹窗
				showSwitchType: false,
				message_list: [],
				animateUp: false,
				timer: null,
				ad_dataset_banner: {
					alias: 'QS_member_personal_banner',
					items: []
				},
				isExitTipsModal: false, // 退出账号提示框
				blackListNum: 0,
				toCompleteResume: false //用户是否需要完善简历
			}
		},
		computed: {
			...mapState({
				points_byname: state => state.config.points_byname,
				LoginOrNot: state => state.LoginOrNot,
				userMobile: state => state.userMobile
			}),
			basic() {
				return this.$store.state.resume.basic
			}
		},
		watch: {
			basic: {
				deep: true,
				handler: function() {
					let basic = this.$store.state.resume.basic
					let dateInstance = new Date()
					let current_date = dateInstance.getFullYear() + '-' + (dateInstance.getMonth() + 1) + '-' +
						dateInstance.getDate()

					// let resume_complete_notice_date = localStorage.getItem('mobile_resume_complete_notice_date')
					let resume_complete_notice_date = uni.getStorageSync('mobile_resume_complete_notice_date');
					if (basic && basic.complete_percent < this.$store.state.config
						.apply_job_min_percent && dateCompare(
							resume_complete_notice_date, current_date) != 'eq') {
						this.showLowPop = true
						localStorage.setItem('mobile_resume_complete_notice_date', current_date)
					}
					if (this.showLowPop === false && this.$store.state.config.resume_auto_refresh == 0) {
						// let resume_refresh_notice_date = localStorage.getItem('mobile_resume_refresh_notice_date')
						let resume_refresh_notice_date = uni.getStorageSync('mobile_resume_refresh_notice_date');
						if (dateCompare(resume_refresh_notice_date, current_date) != 'eq') {
							this.showRefreshPop = true
							localStorage.setItem('mobile_resume_refresh_notice_date', current_date)
						}
					}
				}
			}
		},
		onPullDownRefresh() {
			this.initInfo(true)
		},
		mounted() {
			this.timer = setInterval(this.scrollAnimate, 3000)
		},
		destroyed() {
			clearInterval(this.timer)
		},
		created() {
			let toCompleteResume = uni.getStorageSync('toCompleteResume')
			this.toCompleteResume = toCompleteResume
			console.log(this.LoginOrNot, this.toCompleteResume, '===========')
			if (this.LoginOrNot && !this.toCompleteResume) {
				this.getBlackListNum()
			}
			this.initInfo()
			// this.fetchAd()
			this.getResumeTotal()
		},
		onShow() {},
		methods: {
			getBlackListNum() {
				// 获取隐私设置信息
				http
					.get(api.resume_privates_info)
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.blackListNum = res.data.data.blacklist.length
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			getResumeTotal() {
				http.post(api.personal_index).then(res => {
					if (res.data.code == 200) {
						this.resumeTotal = {
							job_apply: res.data.data.manage.job_apply,
							interview: res.data.data.manage.interview,
							attention_me: res.data.data.manage.attention_me,
							view_job: res.data.data.manage.view
						}
					}
				})
			},
			handlerJump(path) {
				console.log('点击事件', path)
				if (!this.LoginOrNot) {
					uni.navigateTo({
						url: '/member/Home'
					})
					return
				}
				if (this.empty_resume === true) {
					toAddResumeByForm()
				} else {
					uni.navigateTo({
						url: path
					})
				}
			},
			handlerJumpQuery(path, query) {
				if (!this.LoginOrNot) {
					uni.navigateTo({
						url: '/member/Home'
					})
					return
				}
				if (this.empty_resume === true) {
					toAddResumeByForm()
				} else {
					uni.navigateTo({
						url: path + query
					})
				}
			},
			handlerJumpService(path, type) {
				if (!this.LoginOrNot) {
					uni.navigateTo({
						url: '/member/Home'
					})
					return
				}
				if (this.empty_resume === true) {
					toAddResumeByForm()
				} else {
					if (type == 'stick' && this.basic.stick === 1) {
						this.$refs.uTips.show({
							title: '该简历已经在推广状态，不能重复推广',
							type: 'error'
						})
						return false
					}
					if (type == 'tag' && this.basic.service_tag !== '') {
						this.$refs.uTips.show({
							title: '该简历已经在推广状态，不能重复推广',
							type: 'error'
						})
						return false
					}
					uni.navigateTo({
						url: path
					})
				}
			},
			getMessageList() {
				http
					.get(api.member_msglist, {
						page: 1,
						pagesize: 10
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.message_list = [...res.data.data.items]
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 公告滚动
			scrollAnimate() {
				this.animateUp = true
				setTimeout(() => {
					this.message_list.push(this.message_list[0])
					this.message_list.shift()
					this.animateUp = false
				}, 500)
			},
			fetchAd() {
				http
					.post(api.ad_list, {
						alias: ['QS_member_personal_banner@mobile']
					})
					.then(res => {
						this.ad_dataset_banner.items = res.data.data.items['QS_member_personal_banner@mobile']
					})
					.catch(() => {})
			},
			// 初始化数据
			initInfo(is_refresh = false) {
				http
					.get(api.editResume)
					.then(res => {
						if (res.data.code == 200) {
							uni.stopPullDownRefresh()
							if (is_refresh) {
								this.$refs.uToast.show({
									title: '页面刷新成功',
									type: 'default'
								})
							}
							if (res.data.data === null) {
								this.empty_resume = true
								// 更新基本资料
								this.$store.dispatch('setBasicInfo', null)
							} else {
								// 更新基本资料
								this.$store.dispatch('setBasicInfo', res.data.data.basic)
								this.empty_resume = false
							}
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 刷新简历
			refreshResume() {
				if (!this.LoginOrNot) {
					uni.navigateTo({
						url: '/member/Home'
					})
					return
				}
				if (this.empty_resume === true) {
					toAddResumeByForm()
				} else {
					this.showRefreshPop = false
					http
						.post(api.resume_refresh)
						.then(res => {
							if (parseInt(res.data.code) === 200) {
								this.$refs.uTips.show({
									title: res.data.message,
									type: 'success'
								})
							} else {
								this.$refs.uTips.show({
									title: res.data.message,
									type: 'error'
								})
							}
						})
						.catch(err => {
							console.log(err)
						})
				}
			},
			// 退出账号
			handleOutLogin() {
				uni.removeStorageSync('loginInfo');
				this.$store.commit('setLoginState', {
					whether: false,
					utype: 0,
					token: '',
					mobile: '',
					userIminfo: {}
				})
				uni.redirectTo({
					url: '/views/Index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-popup {
		position: fixed;
		right: -100vw;
		top: 0;
		z-index: 19999;
		width: 100vw;
		height: 100vh;
		transition: all .3s;
		background: #FFFFFF;

		&.login-popup-ac {
			right: 0;
		}
	}

	.u-popup--center {
		background: transparent;
	}

	.box_9 {
		width: 572rpx;
		background-image: url($ImgUrl + "pop_bg1.png");
		background-color: #ffffff;
		background-position: center 0;
		background-repeat: no-repeat;
		border-radius: 20rpx;
		background-size: 572rpx 360rpx;
		text-align: center;
		padding-bottom: 60rpx;

		.tx1 {
			font-size: 36rpx;
			color: #333333;
			padding: 398rpx 0 32rpx;
		}

		.tx2 {
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 30rpx;
		}

		.btn_wrapper {
			padding-top: 40rpx;
			width: 490rpx;
			margin: 0 auto;

			.btn_right {
				display: inline-block;
				font-size: 26rpx;
				color: #ffffff;
				padding: 24rpx 0;
				width: 220rpx;
				border-radius: 54rpx;
				border: 2rpx solid #3388ff;
				background-color: #3388ff;
			}
		}
	}

	.box_8 {
		width: 572rpx;
		background-image: url($ImgUrl + "pop_bg2.png");
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: center 0;
		border-radius: 20rpx;
		background-size: 572rpx 360rpx;
		text-align: center;
		padding-bottom: 60rpx;

		.tx1 {
			font-size: 36rpx;
			color: #333333;
			padding: 398rpx 0 32rpx;
		}

		.tx2 {
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 16rpx;
		}

		.btn_wrapper {
			padding-top: 40rpx;
			width: 490rpx;
			margin: 0 auto;

			.btn_left {
				float: left;
				font-size: 26rpx;
				color: #999999;
				padding: 24rpx 0;
				width: 220rpx;
				border-radius: 54rpx;
				border: 2rpx solid #e2e2e2;
			}

			.btn_right {
				float: right;
				font-size: 26rpx;
				color: #ffffff;
				padding: 24rpx 0;
				width: 220rpx;
				border-radius: 54rpx;
				border: 2rpx solid #3388ff;
				background-color: #3388ff;
			}
		}
	}

	.handle_line {
		font-size: 32rpx;
		color: #333333;
		padding: 33rpx 0 33rpx 104rpx;
		position: relative;
		display: block;

		.right_txt {
			position: absolute;
			right: 68rpx;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 28rpx;
			color: #c9c9c9;
		}

		.tip_go {
			position: absolute;
			left: 248rpx;
			top: 50%;
			transform: translate(0, -50%);
			width: 43rpx;
			height: 28rpx;
			background-image: url($ImgUrl + "personal_index_app_go.png");
			background-repeat: no-repeat;
			background-position: 0;
			background-size: 43rpx 28rpx;
		}

		&::before {
			position: absolute;
			right: 34rpx;
			top: 49rpx;
			width: 12rpx;
			height: 12rpx;
			border-top: 2rpx solid #d9d9d9;
			border-right: 2rpx solid #d9d9d9;
			transform: rotate(45deg);
			content: " ";
		}

		&:not(:last-child)::after {
			content: " ";
			position: absolute;
			pointer-events: none;
			right: 0;
			bottom: 0;
			left: 104rpx;
			border-bottom: 2rpx solid #f3f3f3;
		}

		&.l1 {
			background-image: url($ImgUrl + "personal_index_l1.png");
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: 48rpx center;
			background-size: 37rpx 32rpx;
		}

		&.l2 {
			background-image: url($ImgUrl + "personal_index_l2.png");
			background-size: 20rpx 32rpx;
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: 46rpx center;
		}

		&.l3 {
			background-image: url($ImgUrl + "personal_index_l3.png");
			background-size: 28rpx 31rpx;
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: 40rpx center;
		}

		&.l4 {
			background-image: url($ImgUrl + "personal_index_l4.png");
			background-size: 35rpx 35rpx;
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: 36rpx center;
		}

		&.l6 {
			background-image: url($ImgUrl + "personal_index_l6.png");
			background-size: 37rpx 36rpx;
			background-position: 36rpx center;
			background-color: #fff;
			background-repeat: no-repeat;
		}

		&.l7 {
			background-image: url("../static/img/personal_index_l7.png");
			background-size: 34rpx 34rpx;
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: 36rpx center;
		}

		&.l8 {
			background-image: url("../static/img/personal_index_l8.png");
			background-size: 34rpx 34rpx;
			background-color: #fff;
			background-repeat: no-repeat;
			background-position: 36rpx center;
		}
	}

	.box_7 {
		width: 100%;
		background-color: #ffffff;

		&.no_mb {
			margin-bottom: 0;
		}
	}

	.box_6 {
		width: 100%;
		background-color: #ffffff;
		padding: 0 32rpx 50rpx 32rpx;

		.box_item {
			float: left;
			width: 312rpx;
			height: 150rpx;
			padding-left: 18rpx;
			border-radius: 12rpx;

			&.t1 {
				background-image: url($ImgUrl + "personal_index_top.png");
				background-color: #fff9f5;
				background-position: 240rpx center;
				background-repeat: no-repeat;
				background-size: 70rpx;
			}

			&.t2 {
				background-image: url($ImgUrl + "personal_index_tag.png");
				background-color: #f7fbff;
				background-position: 240rpx center;
				background-repeat: no-repeat;
				background-size: 70rpx;
				float: right;

				.tx1 {
					color: #218ffc;
				}
			}

			.tx1 {
				padding: 33rpx 0 17rpx;
				font-size: 32rpx;
				color: #ff8a4a;
			}

			.tx2 {
				font-size: 20rpx;
				color: #999999;
			}
		}
	}

	.box_4 {
		width: 100%;
		background-color: #ffffff;

		.box_item {
			display: block;
			width: 25%;
			text-align: center;
			font-size: 24rpx;
			color: #666666;
			margin: 30rpx 0;
			float: left;

			.ico_box {
				height: 60rpx;
				width: 50rpx;
				margin: 0 auto;
				position: relative;

				&.new::after {
					content: " ";
					position: absolute;
					width: 36rpx;
					height: 22rpx;
					top: -12rpx;
					right: -32rpx;
					background-image: url($ImgUrl + "personal_index_app_new.png");
					background-repeat: no-repeat;
					background-position: 0;
					background-size: 36rpx 22rpx;
				}

				&.b1 {
					background-image: url($ImgUrl + "personal_index_app1.png");
					background-repeat: no-repeat;
					background-position: center 0;
					background-size: 38rpx;
				}

				&.b2 {
					background: url($ImgUrl + "personal_index_app2.png") center 0 no-repeat;
					background-size: 40rpx 39rpx;
					background-repeat: no-repeat;
					background-position: center 0;
				}

				&.b3 {
					background-image: url($ImgUrl + "personal_index_app3.png");
					background-size: 47rpx 38rpx;
					background-repeat: no-repeat;
					background-position: center 0;
				}

				&.b4 {
					background-image: url($ImgUrl + "personal_index_app4.png");
					background-size: 47rpx 40rpx;
					background-repeat: no-repeat;
					background-position: center 0;
				}

				&.b5 {
					background-image: url($ImgUrl + "personal_index_app5.png");
					background-size: 46rpx 33rpx;
					background-repeat: no-repeat;
					background-position: center 0;
				}

				&.b6 {
					background-image: url($ImgUrl + "personal_index_app6.png");
					background-size: 40rpx 38rpx;
					background-repeat: no-repeat;
					background-position: center 0;
				}

				&.b7 {
					background-image: url($ImgUrl + "personal_index_app7.png");
					background-size: 45rpx 40rpx;
					background-repeat: no-repeat;
					background-position: center 0;
				}

				&.b8 {
					background-image: url($ImgUrl + "personal_index_app8.png");
					background-size: 36rpx 38rpx;
					background-repeat: no-repeat;
					background-position: center 0;
				}

				&.b9 {
					background-image: url($ImgUrl + "refresh.png");
					background-size: 36rpx 38rpx;
					background-repeat: no-repeat;
					background-position: center 0;
				}
			}
		}
	}

	.video {
		background-image: url($ImgUrl + "video.png");
		background-color: #f5f5f5;
		background-repeat: no-repeat;
		background-position: 0 center;
		background-size: 74rpx 38rpx;
		border-radius: 100rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 22rpx;
		margin-bottom: 22rpx;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		padding-left: 84rpx;
		box-sizing: border-box;

		.title {
			color: #1f1f1f;
			font-size: 26rpx;
		}

		.tisp {
			margin-top: 8rpx;
			color: #666666;
			font-size: 22rpx;

			text {
				color: #ff7f3a;
			}
		}
	}

	.box_title {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding: 35rpx 0 35rpx 36rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #333333;

		.right_txt {
			position: absolute;
			right: 32rpx;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 24rpx;
			color: #999999;
		}
	}

	.box_3 {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding-left: 150rpx;
		height: 100rpx;
		overflow: hidden;

		&::after {
			position: absolute;
			right: 34rpx;
			top: 42rpx;
			width: 14rpx;
			height: 14rpx;
			border-top: 2rpx solid #999999;
			border-right: 2rpx solid #999999;
			transform: rotate(45deg);
			content: " ";
		}

		.title {
			position: absolute;
			left: 32rpx;
			top: 50%;
			transform: translate(0, -50%);
			font-size: 22rpx;
			color: #ff6600;
			padding: 4rpx 20rpx;
			background-color: #fff5e8;
			border: 2rpx solid #ffaf6e;
			border-radius: 42rpx;
		}

		li {
			font-size: 26rpx;
			color: #333333;
			padding: 27rpx 44rpx 27rpx 0;
			width: 580rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.animate-up {
			transition: all 0.5s ease-in-out;
			transform: translateY(-10rpx);
		}
	}

	.box_2 {
		width: 100%;
		font-size: 24rpx;
		color: #ff6600;
		position: relative;
		padding: 23rpx 0 23rpx 66rpx;
		background-image: $remind_ico;
		background-color: #fffbeb;
		background-position: 26rpx center;
		background-repeat: no-repeat;
		background-size: 30rpx;

		.right_txt {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 24rpx;
			color: #1787fb;
			padding: 23rpx 34rpx;
		}
	}

	.box_1 {
		width: 100%;
		display: flex;
		background-color: #f7fbff;

		.box_item {
			flex: 1;
			text-align: center;
			position: relative;

			&:not(:last-child)::after {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(0, -50%);
				height: 26rpx;
				border-right: 2rpx solid #f3f3f3;
				content: " ";
			}

			.item {
				font-size: 28rpx;
				color: #1787fb;
				padding: 25rpx 0 25rpx 46rpx;
				width: 160rpx;
				margin: 0 auto;

				&.t1 {
					background-image: $refresh;
					background-position: 0 center;
					background-repeat: no-repeat;
					background-size: 28rpx;
				}

				&.t2 {
					background-image: $preview;
					background-position: 0 center;
					background-repeat: no-repeat;
					background-size: 28rpx;
				}

				&.t3 {
					background-image: $edit;
					background-position: 0 center;
					background-repeat: no-repeat;
					background-size: 28rpx;
				}
			}
		}
	}

	.top_box {
		position: relative;
		width: 100%;
		padding-top: 9rpx;
		text-align: center;

		.avatar_wrapper {
			width: 140rpx;
			height: 140rpx;
			border-radius: 140rpx;
			margin: 100rpx auto 20rpx;
			box-shadow: 0 2rpx 10rpx #c2c2c2;
			background-color: #ffffff;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 140rpx;
				border: 0;
			}
		}

		.user_name {
			position: relative;
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
			width: 144rpx;
			text-align: center;
			margin: 0 auto;

			.percent {
				position: absolute;
				right: -80rpx;
				bottom: 30rpx;
				font-size: 20rpx;
				color: #ffffff;
				background-color: #ff9053;
				border-radius: 10rpx;
				padding: 4rpx 8rpx;

				&::after {
					content: " ";
					position: absolute;
					left: -14rpx;
					top: 50%;
					width: 0;
					height: 0;
					border-bottom: 16rpx solid #ff9053;
					border-left: 16rpx solid transparent;
					transform: translate(0, -50%);
				}
			}
		}

		.current_txt {
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.info-box {
		height: 362rpx;
		padding: 0 32rpx;
		// background-color:#ff584c;
		background: url(../static/img/per-bg.png);
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 750rpx 339rpx;

		.user-info {
			display: flex;
			padding: 50rpx 0;
			align-items: center;
			// justify-content: center;

			.user-img {
				flex-shrink: 0;
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
				margin-right: 33rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.user-text {
				width: 380rpx;
				color: #ffffff;
				margin-right: 20rpx;

				.t1 {
					font-size: 38rpx;
					line-height: 55rpx;

					.text {
						position: relative;
						font-weight: bold;

						.pos {
							width: 71rpx;
							position: absolute;
							right: -80rpx;
							font-weight: lighter;
							top: -20rpx;
							color: #514d11;
							font-size: 24rpx;
							text-align: center;
							border-radius: 20rpx;
							height: 38rpx;
							line-height: 38rpx;
							background: url(../static/img/per-bg2.png);
							background-repeat: no-repeat;
							background-size: 71rpx 38rpx;
							background-repeat: no-repeat;
						}
					}
				}

				.t2 {
					font-size: 24rpx;
					line-height: 45rpx;
				}
			}

			.user-resume {
				color: #fff;
				position: relative;
				padding-right: 20rpx;

				&::after {
					content: " ";
					position: absolute;
					right: 0rpx;
					top: 50%;
					width: 12rpx;
					height: 12rpx;
					margin-top: -6rpx;
					border-top: 2rpx solid #fff;
					border-right: 2rpx solid #fff;
					transform: rotate(45deg);
				}
			}
		}

		.info-list {
			height: 145rpx;
			background: #fff;
			box-shadow: 0rpx 0rpx 10rpx #ccc;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;

			.item {
				flex: 1;

				.num {
					color: #333333;
					font-size: 38rpx;
					font-weight: bold;
					line-height: 52rpx;
				}

				.text {
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}

	.my_app {
		// background:url($ImgUrl + "personal_index_top_bg.png");
		background-color: #ffffff;
		background-repeat: no-repeat;
		background-position: center 0;
		background-size: 750rpx 227rpx;
	}
</style>